<template>
  <div class="dashboard-container">
    <!-- 项目介绍卡片 -->
    <el-card class="intro-card" shadow="hover">
      <div class="intro-content">
        <div class="intro-header">
          <div class="header-content">
            <img src="@/assets/logo/logo.png" alt="" class="intro-logo">
            <p class="intro-subtitle">专为小微企业设计的智能财务与库存管理系统</p>
          </div>
        </div>
        <div class="intro-details">
          <h3>项目背景</h3>
          <p>小微企业在日常经营中面临财务记录不规范、数据统计困难、分析能力不足等问题。手工记账方式效率低，且容易出错。</p>
          <h3>研究意义</h3>
          <ul>
            <li>通过系统化的记账管理，提高小微企业日常财务处理效率。</li>
            <li>结合数据分析与可视化功能，帮助企业主更好地了解经营状况，优化决策。</li>
          </ul>
          <h3>项目目标</h3>
          <p>开发一款针对小微企业的财务管理系统，支持收入、支出记录，库存管理，以及数据分析与可视化功能，为企业提供智能化的账务管理工具。</p>
        </div>
        <div class="intro-features">
          <div class="feature-item">
            <div class="feature-text">
              <h3>智能记账</h3>
              <p>自动化收支记录，实时财务分析，助力企业资金管理</p>
            </div>
          </div>
          <div class="feature-item">
            <div class="feature-text">
              <h3>库存监控</h3>
              <p>实时库存追踪，智能预警提醒，优化库存水平</p>
            </div>
          </div>
          <div class="feature-item">
            <div class="feature-text">
              <h3>数据分析</h3>
              <p>多维度经营数据可视化，辅助企业决策分析</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 技术栈介绍 -->
      <div class="tech-stack">
        <h3 class="tech-stack-title">技术栈介绍</h3>
        <div class="tech-container">
          <div class="tech-section">
            <h4>前端技术栈</h4>
            <div class="tech-grid">
              <div class="tech-item">
                <h5>Vue.js</h5>
                <p>渐进式JavaScript框架，用于构建用户界面</p>
              </div>
              <div class="tech-item">
                <h5>Element UI</h5>
                <p>基于Vue的组件库，提供丰富的UI组件</p>
              </div>
              <div class="tech-item">
                <h5>Vuex</h5>
                <p>状态管理模式，集中式存储管理应用的所有组件的状态</p>
              </div>
              <div class="tech-item">
                <h5>Vue Router</h5>
                <p>官方的路由管理器，实现单页面应用导航</p>
              </div>
              <div class="tech-item">
                <h5>Axios</h5>
                <p>基于promise的HTTP库，用于浏览器和node.js的网络请求</p>
              </div>
            </div>
          </div>
          <div class="tech-section">
            <h4>后端技术栈</h4>
            <div class="tech-grid">
              <div class="tech-item">
                <h5>Spring Boot</h5>
                <p>简化Spring应用开发的框架，快速构建企业级应用</p>
              </div>
              <div class="tech-item">
                <h5>MyBatis</h5>
                <p>优秀的持久层框架，简化数据库操作</p>
              </div>
              <div class="tech-item">
                <h5>MySQL</h5>
                <p>可靠的关系型数据库，存储业务数据</p>
              </div>
              <div class="tech-item">
                <h5>Redis</h5>
                <p>高性能的缓存数据库，提升系统响应速度</p>
              </div>
              <div class="tech-item">
                <h5>Spring Security</h5>
                <p>安全框架，提供身份认证和授权功能</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Index',
  components: {},
  data() {
    return {}
  },
  created() { },
  methods: {}
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  display: flex;
  justify-content: center;
  align-items: flex-start;

  .intro-card {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-4px);
    }

    .intro-content {
      padding: 40px;

      .intro-header {
        text-align: center;
        margin-bottom: 48px;

        // logo的大小
        .intro-logo {
          width: 400px;
          height: 310px;
          margin-bottom: 16px;
        }

        h2 {
          font-size: 36px;
          font-weight: 600;
          color: #1a1a1a;
          margin-bottom: 16px;
          letter-spacing: 0.5px;
        }

        .intro-subtitle {
          font-size: 18px;
          color: #666;
          line-height: 1.6;
        }
      }

      .intro-details {
        margin-bottom: 48px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;

        h3 {
          font-size: 24px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 32px 0 20px;
          letter-spacing: 0.3px;

          &:first-child {
            margin-top: 0;
          }
        }

        p {
          font-size: 16px;
          color: #666;
          line-height: 1.8;
          margin-bottom: 20px;
        }

        ul {
          list-style-type: disc;
          padding-left: 24px;
          margin-bottom: 20px;

          li {
            font-size: 16px;
            color: #666;
            line-height: 1.8;
            margin-bottom: 12px;
            padding-left: 8px;

            &::marker {
              color: #409eff;
            }
          }
        }
      }

      .intro-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 32px;
        margin-top: 40px;

        .feature-item {
          background-color: #fff;
          border-radius: 12px;
          padding: 32px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          transition: all 0.3s ease;
          border: 1px solid #ebeef5;

          &:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
            border-color: #409eff;

            .feature-text h3 {
              color: #409eff;
            }
          }

          .feature-text {
            h3 {
              font-size: 20px;
              font-weight: 600;
              color: #1a1a1a;
              margin-bottom: 16px;
              transition: color 0.3s ease;
            }

            p {
              font-size: 16px;
              color: #666;
              line-height: 1.6;
            }
          }
        }
      }
    }
  }
}

.tech-stack {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid #ebeef5;

  .tech-stack-title {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 40px;
  }

  .tech-container {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;

    .tech-section {
      flex: 1;
      min-width: 300px;

      h4 {
        font-size: 24px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 24px;
        text-align: center;
      }

      .tech-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 24px;

        .tech-item {
          background-color: #fff;
          border-radius: 12px;
          padding: 24px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          transition: all 0.3s ease;
          border: 1px solid #ebeef5;

          &:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
            border-color: #409eff;

            h5 {
              color: #409eff;
            }
          }

          h5 {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 12px;
            transition: color 0.3s ease;
          }

          p {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;

    .intro-card {
      border-radius: 12px;

      .intro-content {
        padding: 24px;

        .intro-header {
          text-align: center;
          margin-bottom: 24px;

          .intro-logo {
            width: 160px;
            height: 160px;
            margin-bottom: 20px;
          }

          h2 {
            font-size: 28px;
            margin-bottom: 12px;
          }

          .intro-subtitle {
            font-size: 16px;
          }
        }

        .intro-details {
          margin-bottom: 24px;

          h3 {
            font-size: 20px;
            margin: 20px 0 12px;
          }

          p {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 12px;
          }

          ul {
            margin-bottom: 12px;

            li {
              font-size: 14px;
              line-height: 1.6;
              margin-bottom: 8px;
            }
          }
        }

        .intro-features {
          gap: 20px;
          margin-top: 24px;

          .feature-item {
            padding: 20px;

            .feature-text {
              h3 {
                font-size: 18px;
                margin-bottom: 8px;
              }

              p {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>